<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="商品管理"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #custom-title>
        <a-tabs default-active-key="1" @tab-click="changeHeader">
          <a-tab-pane :key="item.type" :title="item.name+` (`+item.count+`)`" v-for="(item, index) in tabsHeader" >
          </a-tab-pane>
        </a-tabs>
      </template>
      <template #custom-left>
	        <a-cascader
	          v-model="queryForm.cateId"
	          :options="cateIdEnum"
	          placeholder="请选择商品分类"
	          style="width: 150px"
	          @change="search"
            :field-names="{ label: 'name', value: 'id'}"

	        />

          <a-input v-model="queryForm.storeName" placeholder="请输入商品名称" allow-clear @change="search">
            <template #prefix><icon-search /></template>
          </a-input>   

          <a-input v-model="queryForm.keywords" placeholder="请输入关键字" allow-clear @change="search">
            <template #prefix><icon-search /></template>
          </a-input>        

        <a-button @click="reset">重置</a-button>
      </template>
      <template #custom-right>
        <a-button v-permission="['common:storeProduct:add']" type="primary" @click="onAdd">
          <template #icon><icon-plus /></template>
          <span>新增</span>
        </a-button>
        <a-tooltip content="导出">
          <a-button v-permission="['common:storeProduct:export']" class="gi_hover_btn-border" @click="onExport">
            <template #icon>
              <icon-download />
            </template>
          </a-button>
        </a-tooltip>
      </template>
      <template #image="{ record }">
        <img :src="record.image" alt="商品图片" width="30" />
      </template>
      
      <template #isShow="{ record }">
        <span v-if="record">上架</span>
        <span v-else>下架</span>
      </template>
      <template #name="{ record }">
        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['common:storeProduct:update']" @click="onUpdate(record)">修改</a-link>
          <a-link
            v-permission="['common:storeProduct:delete']"
            status="danger"
            :disabled="record.disabled"
            @click="onDelete(record)"
          >
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>

    <StoreProductAddModal ref="StoreProductAddModalRef" @save-success="search" />
    <StoreProductDetailDrawer ref="StoreProductDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import StoreProductAddModal from './StoreProductAddModal.vue'
import StoreProductDetailDrawer from './StoreProductDetailDrawer.vue'
import { type StoreProductDetailResp, type StoreProductQuery, type CategoryDetailResp,getTabsHeader,treeCategory,deleteStoreProduct, exportStoreProduct, listStoreProduct } from '@/apis'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useDownload, useTable } from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'
import { useDict } from '@/hooks/app'

defineOptions({ name: 'StoreProduct' })

const queryForm = reactive<StoreProductQuery>({
  cateId: undefined,
  type: 1,
  sort: ['createTime,desc']
})


const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((page) => listStoreProduct({ ...queryForm, ...page }), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '商品图片', dataIndex: 'image', slotName: 'image' },
  { title: '商品名称', dataIndex: 'storeName', slotName: 'storeName' },
  { title: '商品价格', dataIndex: 'price', slotName: 'price' },
  { title: '成本价', dataIndex: 'cost', slotName: 'cost' },
  { title: '销量', dataIndex: 'sales', slotName: 'sales' },
  { title: '库存', dataIndex: 'stock', slotName: 'stock' },
  { title: '状态', dataIndex: 'isShow', slotName: 'isShow' },
  { title: '关键字', dataIndex: 'keyword', slotName: 'keyword' },
  { title: '添加时间', dataIndex: 'createTime', slotName: 'createTime' },
  {
    title: '操作',
    slotName: 'action',
    width: 130,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['common:storeProduct:update', 'common:storeProduct:delete'])
  }
]

// 重置
const reset = () => {
  queryForm.cateId = undefined
  search()
}

// 重置
const changeHeader = (key, event) => {
  queryForm.type = key
  search()
}

// 删除
const onDelete = (item: StoreProductDetailResp) => {
  return handleDelete(() => deleteStoreProduct(item.id), {
    content: `是否确定删除该条数据？`,
    
    showModal: true
  })
}

// 导出
const onExport = () => {
  useDownload(() => exportStoreProduct(queryForm))
}

const StoreProductAddModalRef = ref<InstanceType<typeof StoreProductAddModal>>()
// 新增
const onAdd = () => {
  StoreProductAddModalRef.value?.onAdd()
}

// 修改
const onUpdate = (item: StoreProductDetailResp) => {
  StoreProductAddModalRef.value?.onUpdate(item.id)
}

const StoreProductDetailDrawerRef = ref<InstanceType<typeof StoreProductDetailDrawer>>()
// 详情
const onDetail = (item: StoreProductDetailResp) => {
  StoreProductDetailDrawerRef.value?.onDetail(item.id)
}

const cateIdEnum = ref<any>([]);
const tabsHeader = ref<any>([]);

const getCateTreeList = async () => {
  const _pram = reactive({ type: "1", status: "1", name: "" })
  const res = await treeCategory(_pram);
  cateIdEnum.value = res.data;
  
};

const handleGetTabsHeader = async () => {
  const res = await getTabsHeader();
  tabsHeader.value = res.data;
};

onMounted(() => {
  getCateTreeList();
  handleGetTabsHeader();
})


</script>

<style lang="scss" scoped></style>
